<template>
  <basic-container>
    <!-- START goBack -->
    <div class="el-page-header haruyuki-mb-20">
      <div
        class="el-page-header__left haruyuki-flex-center haruyuki-size-18"
        @click="goBack"
      >
        <i class="el-icon-arrow-left"></i>
        <div class="haruyuki-size-16">返回</div>
      </div>
      <div class="el-page-header__content">服务商详情</div>
    </div>
    <!-- END goBack -->
    <section class="haruyuki-bg-color-white">
      <el-alert
        v-if="basicData.auditResult"
        title="审核备注："
        :description="basicData.auditResult"
        type="error">
      </el-alert>
      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-user"></i
          ><span class="haruyuki-ml-6">{{ labelData.basicTitle }}</span>
        </div>
        <div>
          <!-- <el-button
            type="primary"
            icon="el-icon-edit"
            size="small"
            v-if="isStartNode && permission.service_pwd && basicData.isEdit == 1"
            @click="passEdit()"
            >修改密码</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="small"
            v-if="isStartNode && permission.service_pwd_sms && basicData.isEdit == 1"
            @click="noteEdit()"
            >短信修改密码</el-button
          > -->
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="small"
            v-if="isStartNode && permission.service_info_edit && basicData.isEdit == 1"
            @click="getBasicEdit(basicData)"
            >编 辑</el-button
          >
        </div>
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="24">
            <span>服务商名称：{{ basicData.serviceName }}</span>
          </el-col>
          <!-- <el-col :span="8">
            <span>服务商类型：{{ basicData.serviceTypeName }}</span>
          </el-col> -->
          <el-col :span="8">
            <span>联系人名称：{{ basicData.contactName }}</span>
          </el-col>
          <el-col :span="8">
            <span>联系人方式：{{ basicData.contactNumber }}</span>
          </el-col>
          <el-col :span="8">
            <span>联系人邮箱：{{ basicData.email }}</span>
          </el-col>
          <el-col :span="8">
            <span >所在区域：{{ basicData.provinceName }}/{{basicData.cityName}}/{{ basicData.areaName }}</span>
          </el-col>
          <el-col :span="8">
            <span>经营地址：{{ basicData.address }}</span>
          </el-col>
          <el-col :span="8">
            <span>创建日期：{{ basicData.createTime }}</span>
          </el-col>
          <el-col :span="8">
            <span>结算模式：{{ basicData.settlementModeName }}</span>
          </el-col>
          <el-col :span="8">
            <span>合作状态：{{ basicData.isCooperateName }}</span>
          </el-col>
          <el-col :span="8">
            <span>分润状态：{{ basicData.profitStateName }}</span>
          </el-col>
          <el-col :span="8">
            <span>合同状态：{{ basicData.cooperateStateName }}</span>
          </el-col>          
          <el-col :span="8" v-if="basicData.exceptionMsg">
            <span>异常状态原因：{{ basicData.exceptionMsg }}</span>
          </el-col>
          <el-col :span="8" v-if="basicData.remark">
            <span>备注内容：{{ basicData.remark }}</span>
          </el-col>
        </el-row>
      </div>
      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-postcard"></i
          ><span class="haruyuki-ml-6">{{ labelData.mainTitle }}</span>
        </div>
        <el-button
          type="primary"
          icon="el-icon-edit"
          size="small"
          v-if="isStartNode && permission.service_info_edit && basicData.isEdit == 1 && basicData.isAuth == 0 && mainData.roaStatus != 0"
          @click="getMainEdit(mainData)"
          >编 辑</el-button
        >
      </div>

      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="24">
            <span>服务商类型：{{ basicData.serviceTypeName }}</span>
          </el-col>
          <el-col :span="8" v-if="basicData.serviceType == 1 || basicData.serviceType == 2">
            <span>公司名称：{{ mainData.compName }}</span>
          </el-col>
          <el-col :span="8" v-if="basicData.serviceType == 1 || basicData.serviceType == 2">
            <span>营业执照编号：{{ mainData.roaLicenseNo }}</span>
          </el-col>
          <el-col :span="8" v-if="basicData.serviceType == 1 || basicData.serviceType == 2">
            <span>营业执照注册地址：{{ mainData.businessAddress }}</span>
          </el-col>
          <el-col :span="8" v-if="basicData.serviceType == 1 || basicData.serviceType == 2">
            <span>营业执照开始日期：{{ getYearMonth(mainData.roaLicenseStartTime) }}</span>
          </el-col>
          <el-col :span="8" v-if="basicData.serviceType == 1 || basicData.serviceType == 2">
            <span>营业执照截止日期：{{ getYearMonth(mainData.roaLicenseTime) }}</span>
          </el-col>
          <!-- <el-col :span="8" v-if="basicData.serviceType == 1 || basicData.serviceType == 2">
            <span>营业执照有效期：{{ mainData.roaLicenseTime }}</span>
          </el-col> -->
          <el-col :span="8">
            <span>法人名称：{{ mainData.roaName }}</span>
          </el-col>
          <el-col :span="8">
            <span>身份证号：{{ mainData.roaCardNo }}</span>
          </el-col>
          <!-- <el-col :span="8">
            <span>法人身份证有效期：{{ mainData.roaCardTime }}</span>
          </el-col> -->
          <el-col :span="8">
            <span>法人身份证开始时间：{{ getYearMonth(mainData.roaCardStartTime) }}</span>
          </el-col>
          <el-col :span="8">
            <span>法人身份证截止时间：{{ getYearMonth(mainData.roaCardTime) }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <!-- <el-col :span="24">
            <span>认证照片</span>
          </el-col> -->
          <el-col :span="8" v-if="basicData.serviceType == 1 || basicData.serviceType == 2">
            <div class="haruyuki-image-preview">
              <div class="image-preview-title">营业执照照片</div>
              <div class="haruyuki-image">
                <el-image
                  style="width: 100%; height: 100%"
                  :src="mainData.roaLicenseImageUrl"
                  z-index="5000"
                  :preview-src-list="[mainData.roaLicenseImageUrl]"
                  fit="contain"
                >
                </el-image>
                <span class="haruyuki-text">营业执照照片</span>
              </div>
            </div>
          </el-col>
          <el-col :span="8" v-if="basicData.serviceType == 0">
            <div class="haruyuki-image-preview">
              <div class="image-preview-title">法人手持身份证</div>
              <div class="haruyuki-image">
                <el-image
                  style="width: 100%; height: 100%"
                  :src="mainData.roaCardHeldUrl"
                  z-index="5000"
                  :preview-src-list="[mainData.roaCardHeldUrl]"
                  fit="contain"
                >
                </el-image>
                <span class="haruyuki-text">法人手持身份证</span>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="haruyuki-image-preview">
              <div class="image-preview-title">法人身份证人像面</div>
              <div class="haruyuki-image">
                <el-image
                  style="width: 100%; height: 100%"
                  :src="mainData.roaCardPositiveUrl"
                  z-index="5000"
                  :preview-src-list="[mainData.roaCardPositiveUrl]"
                  fit="contain"
                >
                </el-image>
                <span class="haruyuki-text">法人身份证人像面</span>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="haruyuki-image-preview">
              <div class="image-preview-title">法人身份证国徽面</div>
              <div class="haruyuki-image">
                <el-image
                  style="width: 100%; height: 100%"
                  :src="mainData.roaCardBackUrl"
                  z-index="5000"
                  :preview-src-list="[mainData.roaCardBackUrl]"
                  fit="contain"
                >
                </el-image>
                <span class="haruyuki-text">法人身份证国徽面</span>
              </div>
            </div>
          </el-col>
        </el-row>
        
      </div>
      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-bank-card"></i
          ><span class="haruyuki-ml-6">{{ labelData.cardTitle }}</span>
        </div>
        <el-button
          type="primary"
          icon="el-icon-edit"
          size="small"
          v-if="isStartNode && permission.service_info_edit && basicData.isEdit == 1 && basicData.isBankAuth == 0 && cardData.robStatus != 0"
          @click="getCardEdit(cardData)"
          >编 辑</el-button
        >
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="8">
            <span>开户行：{{ cardData.robBank }}</span>
          </el-col>
          <el-col :span="8">
            <span>开户支行：{{ cardData.robBankBranch }}</span>
          </el-col>
          <!-- <el-col :span="8">
            <span>账户名称：{{ cardData.robBankName }}</span>
          </el-col> -->
          <el-col :span="8" v-if="cardData.bankMobile">
            <span>银行预留手机号：{{ cardData.bankMobile }}</span>
          </el-col>
          <el-col :span="8">
            <span>银行账号：{{ cardData.robBankNo }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <!-- <el-col :span="24">
            <span>认证照片</span>
          </el-col> -->
          <el-col :span="8" v-if="basicData.serviceType != 0">
            <div class="haruyuki-image-preview">
              <div class="image-preview-title">对公开户证明</div>
              <div class="haruyuki-image">
                <el-image
                  style="width: 100%; height: 100%"
                  :src="cardData.robCardPublicImgUrl"
                  z-index="5000"
                  :preview-src-list="[cardData.robCardPublicImgUrl]"
                  fit="contain"
                >
                </el-image>
                <span class="haruyuki-text">对公开户证明</span>
              </div>
            </div>
          </el-col>
          <el-col :span="8" v-if="basicData.serviceType == 0">
            <div class="haruyuki-image-preview">
              <div class="image-preview-title">结算卡正面</div>
              <div class="haruyuki-image">
                <el-image
                  style="width: 100%; height: 100%"
                  :src="cardData.robBankPositiveUrl"
                  z-index="5000"
                  :preview-src-list="[cardData.robBankPositiveUrl]"
                  fit="contain"
                >
                </el-image>
                <span class="haruyuki-text">结算卡正面</span>
              </div>
            </div>
          </el-col>
          <el-col :span="8" v-if="basicData.serviceType == 0">
            <div class="haruyuki-image-preview">
              <div class="image-preview-title">结算卡反面</div>
              <div class="haruyuki-image">
                <el-image
                  style="width: 100%; height: 100%"
                  :src="cardData.robBankBackUrl"
                  z-index="5000"
                  :preview-src-list="[cardData.robBankBackUrl]"
                  fit="contain"
                >
                </el-image>
                <span class="haruyuki-text">结算卡反面</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-cpu"></i
          ><span class="haruyuki-ml-6">{{ labelData.aisleTitle }}</span>
        </div>
        <div>
          <!-- <el-button
            type="primary"
            icon="el-icon-edit"
            size="small"
            v-if="isStartNode && permission.service_info_edit"
            @click="getPolicyEdit()"
            >修改结算价</el-button
          > -->
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="small"
            v-if="isStartNode && permission.service_info_edit && basicData.isEdit == 1"
            @click="getAisleEdit(aisleList)"
            >分配通道</el-button
          >
        </div>
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="6" v-for="(item, index) in aisleList" :key="index">
            <div @click.stop="getPolicyEdit(item.aisleCode)">
              <span class="haruyuki-color-primaryblue cursor-pointer">{{
                item.aisleName
              }}</span>
              <span
                class="haruyuki-color-silverGray haruyuki-size-14"
                v-if="item.isDefault == '1'"
                >（正在使用）</span
              >
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 其他信息 -->
      <template v-if="basicData.serviceAuditStatus == 2">
        <div class="haruyuki-flex-space-between haruyuki-align-items-center">
          <div class="haruyuki-title haruyuki-size-16">
            <i class="el-icon-set-up"></i><span class="haruyuki-ml-6">其他信息</span>
          </div>
        </div>
        <div class="haruyuki-content" >
          <el-button
            type="primary"
            size="small"
            @click="infoChange"
          >信息变更</el-button>
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="small"
            v-if="isStartNode && permission.service_pwd && basicData.isEdit == 1"
            @click="passEdit()">重置密码</el-button>
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="small"
            v-if="isStartNode && permission.service_pwd_sms && basicData.isEdit == 1"
            @click="noteEdit()">重发密码短信</el-button>
        </div>
      </template>
    </section>
    <!-- 编 辑 -->
    <el-dialog
      :title="'编辑' + dialogText"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
    >
      <template>
        <div class="el-dialog-div" v-show="active == 0">
          <basic-form :basicForm="basicForm" ref="toBasicForm" />
        </div>
      </template>
      <template>
        <div v-if="active == 1">
          <main-form
            :mainForm="mainForm"
            :serviceType="basicData.serviceType"
            ref="toMainForm"
          />
          <el-alert
            v-if="mainForm.auditRemark"
            title="审核备注："
            :description="mainForm.auditRemark"
            type="error">
          </el-alert>
        </div>
      </template>
      <template>
        <div v-if="active == 2">
          <card-form
            :cardForm="cardForm"
            :serviceType="basicData.serviceType"
            ref="toCardForm"
          />
          <el-alert
            v-if="cardForm.auditRemark"
            title="审核备注："
            :description="cardForm.auditRemark"
            type="error">
          </el-alert>
        </div>
      </template>
      <template>
        <div v-if="active == 3">
          <el-transfer
            class="haruyuki-width-100 haruyuki-flex-center"
            filterable
            :filter-method="filterMethod"
            filter-placeholder="请输入通道名称"
            :button-texts="['取消分配', '分配通道']"
            :titles="['未分配通道', '已分配通道']"
            v-model="aisleAllot"
            :data="aisleData"
          >
          </el-transfer>
        </div>
      </template>
      <template>
        <div v-if="active == 4">
          <policy-form
            :oem="service"
            :aisleCodeList="aisleAllot"
            identityType="service"
            ref="toPolicyForm"
          />
        </div>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button
          icon="el-icon-check"
          size="small"
          type="primary"
          v-preventClick
          @click.stop="handleSubmit"
          >提 交</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      v-if="policyVisible"
      :title="labelData.policyTitle"
      append-to-body
      :visible.sync="policyVisible"
    >
      <template>
        <!-- <policy-form
          :oem="service"
          :aisleCode="aisleCode"
          identityType="service"
          ref="toPolicyForm"
        /> -->
        <policy-form
          :oem="service"
          :aisleCodeList="aisleAllot"
          identityType="service"
          ref="toPolicyForm"
        />
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button
          icon="el-icon-check"
          size="small"
          type="primary"
          v-if="basicData.isEdit == 1"
          v-preventClick
          @click.stop="getPolicyEditForm"
          >提 交</el-button
        >
      </span>
    </el-dialog>
    <!-- 修改密码 -->
    <el-dialog
      v-if="passVisible"
      title="修改密码"
      append-to-body
      width="550px"
      :visible.sync="passVisible"
      :before-close="handlePassClose"
    >
      <template>
        <passForm :passForm="passForm" ref="toPassForm" />
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button
          icon="el-icon-check"
          size="small"
          type="primary"
          v-preventClick
          @click.stop="getPassUpdate"
          >提 交</el-button
        >
      </span>
    </el-dialog>
    <!-- 变更信息 -->
    <el-dialog
      v-if="infoVisible"
      title="认证信息变更"
      append-to-body
      top="80px"
      :visible.sync="infoVisible"
      :before-close="handleInfoClose"
    >
      <div>
        <!-- 变更类型 -->
        <div class="infoWrap_line">
          <span class="info_line_span">变更类型：</span>
          <el-select 
            class="w100"
            size="small"
            v-model="infoObj.type"
            @change="typeOptionChange"
            placeholder="请选择变更类型">
            <el-option
              v-for="item in typeOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled">
            </el-option>
          </el-select>
        </div>
        <!-- 认证主体变更 -->
        <div v-if="infoObj.type == '0'">
          <!-- <div v-if="basicData.serviceAuditStatus == 2"> -->
          <div v-if="typeOption[parseInt(infoObj.type)].isShow">
            <div class="infoWrap_line">
              <span class="info_line_span">服务商类型：</span>
              <el-select
                class="w100"
                size="small"
                v-model="infoObj.serviceType"
                placeholder="请选择服务商类型">
                <el-option
                  v-for="item in infoObj.serviceTypeList"
                  :key="item.dictKey"
                  :label="item.dictValue"
                  :value="item.dictKey"
                >
                </el-option>
              </el-select>
            </div>
            <main-form
              :mainForm="mainForm"
              :serviceType="infoObj.serviceType"
              ref="toMainForm"
            />
          </div>
          <!-- <div v-else>{{basicData.serviceAuditStatusName}}</div> -->
          <!-- <div class="nullData" v-else>认证主体变更审核中</div> -->
        </div>
        <!-- 结算账户变更 -->
        <div v-if="infoObj.type == '1'">
          <div v-if="typeOption[parseInt(infoObj.type)].isShow">
            <!-- <div class="infoWrap_line">
              <span class="info_line_span">结算账户类型：</span>
              <el-select
                class="w100"
                size="small"
                v-model="infoObj.serviceType"
                placeholder="请选择结算账户类型">
                <el-option
                  v-for="item in infoObj.serviceTypeList"
                  :key="item.dictKey"
                  :label="item.dictValue"
                  :value="item.dictKey"
                >
                </el-option>
              </el-select>
            </div> -->
            <card-form
              :cardForm="cardForm"
              :serviceType="infoObj.serviceType"
              ref="toCardForm"
            />
          </div>
        </div>
        <!-- 登录账户变更 -->
        <div v-if="infoObj.type == '2'">
          <el-form v-if="typeOption[parseInt(infoObj.type)].isShow" :model="signInForm" ref="signInForm" :rules="signInFormRules" label-width="140px" >
            <el-form-item label="原登录账户" prop="oldMobile">
              <el-input readonly size="small" v-model.number="basicData.contactNumber" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="新登录账户" prop="mobile">
              <el-input size="small" v-model.number="signInForm.mobile" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="smsCode">
              <el-input size="small" v-model.number="signInForm.smsCode" autocomplete="off">
                <template slot="append">
                  <el-button class="btnCode" type="primary" @click="signing()" :disabled="mBtn">
                    <span v-show="!mBtn">获取验证码</span>
                    <span v-show="mBtn">重新发送{{second}}S</span>
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
         </el-form>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button
          icon="el-icon-check"
          size="small"
          type="primary"
          v-preventClick
          @click="infoSubmit"
        >提 交</el-button>
      </span>
    </el-dialog>
  </basic-container>
</template>

<script>
import { getServiceDetail } from "@/api/rb-service/serviceinfo/service_info_details";
import { update,authUpdate,authUpdateV2,bankUpdate,aisleUpdate,policyUpdate,policyUpdateAll,getAisleOemList,getServiceInfo,getUpdatePwdBySms,getUpdatePwd } from "@/api/rb-service/serviceinfo/service_info";
import { mapGetters } from "vuex";
import basicForm from "@/components/rb-service/basic-form";
import mainForm from "@/components/rb-service/main-form";
import cardForm from "@/components/rb-service/card-form";
import policyForm from "@/components/rb-service/policy-form";
import passForm from "@/components/rb-service/pass-form";
import { getDictionary } from "@/api/system/dict";

import { changeAccount,updateServiceAccount } from "@/api/rb-service/forgetPassword/forgetPassword";
import md5 from 'js-md5';

export default {
  components: {
    basicForm,
    mainForm,
    cardForm,
    policyForm,
    passForm,
  },
  data() {
    return {
      labelData: {
        basicTitle: "服务商基础信息",
        walletTitle: "服务商钱包",
        mainTitle: "实名认证信息",
        cardTitle: "结算卡信息",
        aisleTitle: "通道信息",
        policyTitle: "通道分润配置",
      },
      dialogVisible: false,
      passVisible: false,
      dialogText: "",
      active: 0,
      policyVisible: false,
      service: {},
      basicData: {
        tenantName: "",
        tenantType: "",
        linkman: "",
        contactNumber: "",
        provinceCityArea: "",
        address: "",
        email: "",
        // isCooperate: "",
        // profitState: "",
        // cooperateState: "",
        exceptionMsg: "",
        domain: "",
        backgroundUrl: "",
      },
      mainData: {},
      cardData: {},
      basicForm: {},
      mainForm: {},
      cardForm: {},
      aisleList: [], //通道列表 显示
      aisleAllot: [], //通道分配 绑定value
      aisleData: [], //通道分配 数据
      aisleCode: "", //点击赋值 通道编号
      isStartNode: true,
      passForm: {
        password: "",
        checkPass: "",
      },
      infoVisible: false,//认证信息变更
      infoObj:{
        type:'0',  // 0认证主体变更 1结算账户变更 2登录账户变更
        serviceType:'0',
        serviceTypeList:[],//服务商类型
      },
      typeOption:[
        {
          value: '0',
          label: '认证主体变更',
          disabled: false,
          isShow:false
        }, {
          value: '1',
          label: '结算账户变更',
          disabled: false,
          isShow:false
        }, {
          value: '2',
          label: '登录账户变更',
          disabled: false,
          isShow:false
        }
      ],
      // 登录账户表单
      signInForm:{
        // oldMobile:"",
        // mobile:"",
        // smsCode:""
      },
      signInFormRules:{
        mobile:[
          { required: true , message: '请输入新登录账户'},
          { required: true ,pattern: /^1[0-9]{10}$/, message: '登录账户格式不正确', trigger: 'blur' }
        ],
        smsCode:[
          { required: true, message: '请输入验证码', trigger: ['blur','change'] },
          { required: true ,pattern: /^\d{6}$/, message: '验证码长度在6个字符', trigger: 'blur' }
        ]
      },
      mBtn:false,
      second:0,
      timer:null,
      timeStamp:'',
      sign:''
    };
  },
  computed: {
    ...mapGetters(["permission","userInfo","tenantId"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.service_info_add, false),
        viewBtn: this.vaildData(this.permission.service_info_view, false),
        delBtn: this.vaildData(this.permission.service_info_delete, false),
        editBtn: this.vaildData(this.permission.service_info_edit, false),
        menuBtn: this.vaildData(this.permission.service_menu, false),
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
    exhibition() {
      return (val) => {
        if (val == "" || val == "-1") {
          return (val = 0);
        } else {
          return val;
        }
      };
    },
    getYearMonth(){
      return (date) => {
        let result = (date + '').split(' ');
        return result[0];
      }
    }
  },
  created() {
    this.doGetDicts();

    this.infoData();
  },
  mounted() {},
  methods: {
    /* 获取验证码 */
    signing(){
      // 发送验证码 API
        // 获取时间戳
        this.timeStamp=Date.now();
        // RuiSY+时间戳+手机号 md5加密 传sign
        this.sign=md5('RuiSY'+this.timeStamp+this.signInForm.mobile);
        let param = {
          smsCodeType:'7',
          mobile:this.signInForm.mobile,
          sign:this.sign,
          timeStamp:this.timeStamp,
          tenantId:this.tenantId
        }
        changeAccount(param).then(()=>{},error=>{
          window.console.log(error);
          this.mBtn = false;
          clearInterval(this.timer);
          this.timer = null;
          this.signInForm.code="";
        })
        // 发送验证码倒计时
        if (!this.timer) {
          this.second = 90;
          this.mBtn = true;
          this.timer = setInterval(() => {
            if (this.second > 0 && this.second <= 90) {
              this.second--;
            } else {
              this.mBtn = false;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
      }
    },
    // 变更主体--提交
    infoSubmit(){
      const _this = this;
      switch (_this.infoObj.type) {
        case '0':
          _this.infoMainEditForm();
          break;
        case '1':
          _this.infoCardEditForm();
          break;
        case '2':
          _this.postAccount();
          break;
      }
    },
    // 修改账户
    postAccount(){
      this.$refs["signInForm"].validate((valid) => {
        if (valid) {
         let param = {
          oldMobile:this.basicData.contactNumber,
          newMobile:this.signInForm.mobile,
          smsCode:this.signInForm.smsCode,
          userNo:this.basicData.userNo
        }
          updateServiceAccount(param).then(()=>{
            this.infoData();

            this.infoVisible = false;
          }),(error) =>{
            window.console.log(error);
          }
        } else {
          return false;
        }
      })
    },
    // 更改实名认证
    infoMainEditForm(){
      this.$refs["toMainForm"].$refs["mainForm"].validate((valid) => {
        if (valid) {
          this.mainForm.id="";
          this.mainForm.userCate = this.infoObj.serviceType;
          const formData = {
            ...this.mainForm
          };
          authUpdateV2(formData).then(
            (res) => {
              if (res.data.code == "200") {
                this.infoData();
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.infoVisible = false;
              } else {
                this.$message({
                  type: "error",
                  message: res.data.message,
                });
              }
            },
            (error) => {
              window.console.log(error);
            }
          );
        } else {
          return false;
        }
      });
    },
    // 更改结算卡
    infoCardEditForm(){
      this.$refs["toCardForm"].$refs["cardForm"].validate((valid) => {
        if (valid) {
          this.cardForm.id="";
          if(this.cardForm.provinceCityArea){
            this.cardForm.province = this.cardForm.provinceCityArea[0];
            this.cardForm.city = this.cardForm.provinceCityArea[1];
            this.cardForm.area = this.cardForm.provinceCityArea[2];
          }
          const formData = {
            ...this.cardForm,
          };
          bankUpdate(formData).then(
            (res) => {
              if (res.data.code == "200") {
                this.infoData();
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.infoVisible = false;
              } else {
                this.$message({
                  type: "error",
                  message: res.data.message,
                });
              }
            },
            (error) => {
              window.console.log(error);
            }
          );
        } else {
          return false;
        }
      });
    },
    // 变更主体
    typeOptionChange(value){
      this.typeOption[2].isShow = false;
      this.infoObj.serviceType = this.basicData.serviceType;//服务商类型

      if(value == '0'){
        this.typeOption[0].isShow = false;

        this.infoMainEdit(this.mainData);
      }else if(value == '1'){
        this.typeOption[1].isShow = false;
        
        this.infoCardEdit(this.cardData);
      }else{
        this.typeOption[2].isShow = true;
      }
    },
    // 信息变更--弹框关闭前回调
    handleInfoClose(done){
      // this.infoObj.type = '';
      this.signInForm={};
      this.typeOption[0].isShow = false;
      this.typeOption[1].isShow = false;
      this.typeOption[2].isShow = false;
      done()
    },
    // 信息变更--弹框打开
    infoChange(){
      this.infoObj.serviceType = this.basicData.serviceType;
      this.signInForm.oldMobile = this.userInfo.account;
      
      // settlementMode 结算状态:   1 日结 2月结
      // isBankAuth     结算卡:     0 未认证 1 已认证
      // isAuth         实名认证:   0 未认证 1 已认证
      // serviceType    服务商类型: 0个人 1一般纳税人 2小规模经营
      
      if(this.basicData.isBankAuth == 0 ){
        this.typeOption[1].disabled = true;
      }

      this.infoVisible = true;

      if(this.basicData.isAuth == 0 ){
        this.infoObj.type = "";
        this.typeOption[0].disabled = true;
      }else{
        this.infoObj.type = "0";
        this.typeOption[0].isShow = true;
        this.infoMainEdit(this.mainData);
      }
    },
    // 实名认证信息--更改--回显
    infoMainEdit(mainData) {
      this.mainForm = JSON.parse(JSON.stringify(mainData));
      this.mainForm.userNo = this.service.userNo;
      this.typeOption[0].isShow = true;

      this.$nextTick(() => {
        this.$refs["toMainForm"].roaLicenseFileList.length == 0 &&
        this.mainForm.roaLicenseImageUrl
          ? this.$refs["toMainForm"].roaLicenseFileList.push({
              url: this.mainForm.roaLicenseImageUrl || "",
            })
          : this.$refs["toMainForm"].roaLicenseFileList;
        this.$refs["toMainForm"].roaPositiveFileList.length == 0 &&
        this.mainForm.roaCardPositiveUrl
          ? this.$refs["toMainForm"].roaPositiveFileList.push({
              url: this.mainForm.roaCardPositiveUrl || "",
            })
          : this.$refs["toMainForm"].roaPositiveFileList;
        this.$refs["toMainForm"].roaCardBackFileList.length == 0 &&
        this.mainForm.roaCardBackUrl
          ? this.$refs["toMainForm"].roaCardBackFileList.push({
              url: this.mainForm.roaCardBackUrl || "",
            })
          : this.$refs["toMainForm"].roaCardBackFileList;
          
        this.$refs["toMainForm"].roaCardHeldFileList.length == 0 &&
        this.mainForm.roaCardHeldUrl
          ? this.$refs["toMainForm"].roaCardHeldFileList.push({
              url: this.mainForm.roaCardHeldUrl || "",
            })
          : this.$refs["toMainForm"].roaCardHeldFileList;
      });
    },
    // 结算卡信息--更改--回显
    infoCardEdit(cardData) {
      this.cardForm = JSON.parse(JSON.stringify(cardData));
      this.cardForm.userNo = this.service.userNo;
      this.typeOption[1].isShow = true;

      this.$nextTick(() => {
        this.$refs["toCardForm"].robBankFileList.length == 0 &&
        this.cardForm.robBankPositiveUrl
          ? this.$refs["toCardForm"].robBankFileList.push({
              url: this.cardForm.robBankPositiveUrl || "",
            })
          : this.$refs["toCardForm"].robBankFileList;
        this.$refs["toCardForm"].robBackFileList.length == 0 &&
        this.cardForm.robBankBackUrl
          ? this.$refs["toCardForm"].robBackFileList.push({
              url: this.cardForm.robBankBackUrl || "",
            })
          : this.$refs["toCardForm"].robBackFileList;
        this.$refs["toCardForm"].robCardFileList.length == 0 &&
        this.cardForm.robCardPublicImgUrl
          ? this.$refs["toCardForm"].robCardFileList.push({
              url: this.cardForm.robCardPublicImgUrl || "",
            })
          : this.$refs["toCardForm"].robCardFileList;
      });
    },
    /* 字典 */
    doGetDicts() {
      getDictionary({code: "service_type"}).then((res) => {
        this.infoObj.serviceTypeList = res.data.data;
      });
    },
    /* 页面加载 初始化请求详情接口 */
    async infoData() {
      const id = this.$route.query.id;
      await getServiceDetail(id).then((res) => {
        this.service = {
          userNo: res.data.data.baseInfo.userNo,
          userType: "2",
        };
        res.data.data.baseInfo.serviceType =
          res.data.data.baseInfo.serviceType + "";
        res.data.data.baseInfo.settlementMode =
          res.data.data.baseInfo.settlementMode + "";
        // res.data.data.baseInfo.isCooperate =
        //   res.data.data.baseInfo.isCooperate + "";
        // res.data.data.baseInfo.cooperateState =
        //   res.data.data.baseInfo.cooperateState + "";
        // res.data.data.baseInfo.profitState =
        //   res.data.data.baseInfo.profitState + "";
        this.basicData = res.data.data.baseInfo;
        // 基础信息省市区
        this.basicData.provinceCityArea = [
          this.basicData.province,
          this.basicData.city,
          this.basicData.area,
        ];
        this.mainData = res.data.data.authInfo;
        this.cardData = res.data.data.bankInfo;
        // 结算卡省市区
        this.cardData.provinceCityArea = [
          this.cardData.province,
          this.cardData.city,
          this.cardData.area
        ];
        this.aisleList = res.data.data.aisleInfos;
      });
    },
    /* 获取当前登录人的结算模式 */
    getUserService() {
      getServiceInfo().then(
        (res) => {
          if (res.data.code == "200") {
            if (res.data.data.settlementMode === 1) {
              this.$refs["toBasicForm"].isSettlement = true;
            }
          } else {
            this.$message({
              type: "error",
              message: res.data.message,
            });
          }
        },
        (error) => {
          window.console.log(error);
        }
      );
    },
    /* OEM编 辑弹框 提交处理 */
    handleSubmit() {
      const _this = this;
      switch (_this.active) {
        case 0:
          _this.getBasicEditForm();
          break;
        case 1:
          _this.getMainEditForm();
          break;
        case 2:
          _this.getCardEditForm();
          break;
        case 3:
          _this.getAislePolicyEditForm();
          // _this.getAisleEditForm();
          break;
        case 4:
          _this.getPolicyEditAllForm();
          break;
      }
    },
    /**
     * @func 关闭服务商信息弹窗
     * @desc 点击关闭的回调
     * @param {Function} done - 完成的回调
     * */
    handleClose(done) {
      this.emptyForm();
      done();
      // this.infoData();
    },
    /**
     * @func 关闭密码弹窗
     * @desc 点击关闭的回调
     * @param {Function} done - 完成的回调
     * */
    handlePassClose(done) {
      this.$refs["toPassForm"].$refs["passForm"].resetFields();
      done();
    },
    emptyForm() {
      switch (this.active) {
        case 0:
          this.$refs["toBasicForm"].$refs["basicForm"].resetFields();
          break;
        case 1:
          this.$refs["toMainForm"].$refs["mainForm"].resetFields();
          this.$refs["toMainForm"].roaLicenseFileList = [];
          this.$refs["toMainForm"].roaPositiveFileList = [];
          this.$refs["toMainForm"].roaCardBackFileList = [];
          this.$refs["toMainForm"].roaCardHeldFileList = [];
          break;
        case 2:
          this.$refs["toCardForm"].$refs["cardForm"].resetFields();
          this.$refs["toCardForm"].robBankFileList = [];
          this.$refs["toCardForm"].robBackFileList = [];
          this.$refs["toCardForm"].robCardFileList = [];
          break;
        case 3:
          this.aisleData = [];
          this.aisleAllot = [];
          break;
      }
      // this.$refs["toBasicForm"].$refs["basicForm"].resetFields();
      // this.$refs['toMainForm'].$refs['mainForm'].resetFields();
      // this.$refs['toCardForm'].$refs['cardForm'].resetFields();
      // this.aisleData = [];
      // this.aisleAllot = [];
      
    },
    /* 手动修改密码 */
    passEdit() {
      this.passVisible = true;
    },
    /* 提交手动修改密码 */
    getPassUpdate() {
      this.$refs["toPassForm"].$refs["passForm"].validate((valid) => {
        if (valid) {
          getUpdatePwd(this.service.userNo, this.passForm.password).then(
            (res) => {
              if (res.data.code == "200") {
                this.infoData();
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.$refs["toPassForm"].$refs["passForm"].resetFields();
                this.passVisible = false;
              } else {
                this.$message({
                  type: "error",
                  message: res.data.message,
                });
              }
            },
            (error) => {
              window.console.log(error);
            }
          );
        } else {
          return false;
        }
      });
    },
    /* 短信修改密码 */
    noteEdit() {
      this.$confirm(`是否发送短信修改当前服务商的密码?`, "短信修改密码", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          getUpdatePwdBySms(this.service.userNo).then(
            (res) => {
              if (res.data.code == "200") {
                this.infoData();
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
              } else {
                this.$message({
                  type: "error",
                  message: res.data.message,
                });
              }
            },
            (error) => {
              window.console.log(error);
            }
          );
        })
        .catch(() => {});
    },
    /* 点击基础信息 处理回显数据 */
    getBasicEdit(basicData) {
      this.active = 0;
      this.basicForm = JSON.parse(JSON.stringify(basicData));
      this.dialogText = this.labelData.basicTitle;
      this.getUserService();
      this.dialogVisible = true;
    },
    /* 基础信息 提交修改 */
    getBasicEditForm() {
      this.$refs["toBasicForm"].$refs["basicForm"].validate((valid) => {
        if (valid) {
          this.basicForm.province = this.basicForm.provinceCityArea[0];
          this.basicForm.city = this.basicForm.provinceCityArea[1];
          this.basicForm.area = this.basicForm.provinceCityArea[2];
          update(this.basicForm).then(
            (res) => {
              if (res.data.code == "200") {
                this.infoData();
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.dialogVisible = false;
              } else {
                this.$message({
                  type: "error",
                  message: res.data.message,
                });
              }
            },
            (error) => {
              window.console.log(error);
            }
          );
        } else {
          return false;
        }
      });
    },
    /* 点击实名信息 处理回显数据 */
    getMainEdit(mainData) {
      this.active = 1;
      this.mainForm = JSON.parse(JSON.stringify(mainData));
      this.mainForm.userNo = this.service.userNo;
      this.dialogText = this.labelData.mainTitle;
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs["toMainForm"].roaLicenseFileList.length == 0 &&
        this.mainForm.roaLicenseImageUrl
          ? this.$refs["toMainForm"].roaLicenseFileList.push({
              url: this.mainForm.roaLicenseImageUrl || "",
            })
          : this.$refs["toMainForm"].roaLicenseFileList;
        this.$refs["toMainForm"].roaPositiveFileList.length == 0 &&
        this.mainForm.roaCardPositiveUrl
          ? this.$refs["toMainForm"].roaPositiveFileList.push({
              url: this.mainForm.roaCardPositiveUrl || "",
            })
          : this.$refs["toMainForm"].roaPositiveFileList;
        this.$refs["toMainForm"].roaCardBackFileList.length == 0 &&
        this.mainForm.roaCardBackUrl
          ? this.$refs["toMainForm"].roaCardBackFileList.push({
              url: this.mainForm.roaCardBackUrl || "",
            })
          : this.$refs["toMainForm"].roaCardBackFileList;

        // 法人手持身份证 
        this.$refs["toMainForm"].roaCardHeldFileList.length == 0 &&
        this.mainForm.roaCardHeldUrl
          ? this.$refs["toMainForm"].roaCardHeldFileList.push({
              url: this.mainForm.roaCardHeldUrl || "",
            })
          : this.$refs["toMainForm"].roaCardHeldFileList;
      });
    },
    /* 实名信息 提交修改 */
    getMainEditForm() {
      this.$refs["toMainForm"].$refs["mainForm"].validate((valid) => {
        if (valid) {
          // this.mainForm.id="";
          const formData = {
            ...this.mainForm
          };
          authUpdate(formData).then(
            (res) => {
              if (res.data.code == "200") {
                this.infoData();
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.dialogVisible = false;
              } else {
                this.$message({
                  type: "error",
                  message: res.data.message,
                });
              }
            },
            (error) => {
              window.console.log(error);
            }
          );
        } else {
          return false;
        }
      });
    },
    /* 点击结算卡信息 处理回显数据 */
    getCardEdit(cardData) {
      if(this.mainData.roaCardNo){
        this.dialogVisible = true;
        this.dialogText = this.labelData.cardTitle;
        this.active = 2;
        this.cardForm = JSON.parse(JSON.stringify(cardData));
        this.cardForm.userNo = this.service.userNo;
        
        if(this.basicData.serviceType == 0){
          this.cardForm.robBankName = this.mainData.roaName;
        }else{
          this.cardForm.robBankName = this.mainData.compName;
        }

        this.$nextTick(() => {
          this.$refs["toCardForm"].robBankFileList.length == 0 &&
          this.cardForm.robBankPositiveUrl
            ? this.$refs["toCardForm"].robBankFileList.push({
                url: this.cardForm.robBankPositiveUrl || "",
              })
            : this.$refs["toCardForm"].robBankFileList;
          this.$refs["toCardForm"].robBackFileList.length == 0 &&
          this.cardForm.robBankBackUrl
            ? this.$refs["toCardForm"].robBackFileList.push({
                url: this.cardForm.robBankBackUrl || "",
              })
            : this.$refs["toCardForm"].robBackFileList;
          this.$refs["toCardForm"].robCardFileList.length == 0 &&
          this.cardForm.robCardPublicImgUrl
            ? this.$refs["toCardForm"].robCardFileList.push({
                url: this.cardForm.robCardPublicImgUrl || "",
              })
            : this.$refs["toCardForm"].robCardFileList;
        });
      }else{
        this.$message({
          message: '请先完成实名认证，在修改结算卡信息',
          type: 'warning'
        });
      }
    
    },
    /* 结算卡信息 提交修改 */
    getCardEditForm() {
      this.$refs["toCardForm"].$refs["cardForm"].validate((valid) => {
        if (valid) {
          // this.cardForm.id="";
          if(this.cardForm.provinceCityArea){
            this.cardForm.province = this.cardForm.provinceCityArea[0];
            this.cardForm.city = this.cardForm.provinceCityArea[1];
            this.cardForm.area = this.cardForm.provinceCityArea[2];
          }
          const formData = {
            ...this.cardForm,
          };
          bankUpdate(formData).then(
            (res) => {
              if (res.data.code == "200") {
                this.infoData();
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.dialogVisible = false;
              } else {
                this.$message({
                  type: "error",
                  message: res.data.message,
                });
              }
            },
            (error) => {
              window.console.log(error);
            }
          );
        } else {
          return false;
        }
      });
    },
    /* 点击支付通道修改 处理回显数据 */
    getAisleEdit(aisleList) {
      this.aisleData = [];
      this.aisleAllot = [];
      this.active = 3;
      this.dialogText = this.labelData.aisleTitle;
      this.dialogVisible = true;
      getAisleOemList("-1", "-1").then((res) => {
        let aisleData = res.data.data.records;
        aisleData.forEach((item, index) => {
          this.aisleData.push({
            label: item.aisleName,
            key: item.aisleCode,
            pinyin: item.aisleName[index],
          });
        });
      });
      aisleList.forEach((item) => {
        this.aisleAllot.push(item.aisleCode);
      });
      // this.$nextTick(() => {
      // });
    },
    /* 支付通道信息 提交修改 */
    getAisleEditForm() {
      if (this.aisleAllot.length > 0) {
        let aisleDatas = {
          aisleCodes: this.aisleAllot,
          ...this.service,
        };
        aisleUpdate(aisleDatas).then(
          (res) => {
            if (res.data.code == "200") {
              this.infoData();
              this.$message({
                type: "success",
                message: "操作成功!",
              });
              this.aisleData = [];
              this.aisleAllot = [];
              this.dialogVisible = false;
            } else {
              this.$message({
                type: "error",
                message: res.data.message,
              });
            }
          },
          (error) => {
            window.console.log(error);
          }
        );
      } else {
        this.$message({
          type: "warning",
          message: "请先选择通道!",
        });
      }
    },
    /* 支付通道信息 提交进入 政策信息 */
    getAislePolicyEditForm() {
      if (this.aisleAllot.length > 0) {
        this.active = 4;
      } else {
        this.$message({
          type: "warning",
          message: "请先选择通道!",
        });
      }
    },
    /* 点击某项支付通道 处理分润政策回显数据 */
    getPolicyEdit(code) {
      this.aisleAllot = [];
      if (code) {
        this.aisleAllot.push(code);
      } else {
        this.aisleAllot = [];
      }
      /* if (code) {
        this.aisleCode = code;
      } else {
        this.aisleCode = "";
      } */
      this.policyVisible = true;
    },
    /* 支付通道信息 提交修改 */
    getPolicyEditForm() {
      let servicePolicyForm = {
        policyList: this.$refs["toPolicyForm"].data,
        ...this.service,
      };
      policyUpdate(servicePolicyForm).then(
        (res) => {
          if (res.data.code == "200") {
            this.infoData();
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.policyVisible = false;
          } else {
            this.$message({
              type: "error",
              message: res.data.message,
            });
          }
        },
        (error) => {
          window.console.log(error);
        }
      );
    },
    /* 全部支付通道信息 提交修改 */
    getPolicyEditAllForm() {
      let policyDatas = {
        policyList: this.$refs["toPolicyForm"].data,
        ...this.service,
      };
      policyUpdateAll(policyDatas).then(
        (res) => {
          if (res.data.code == "200") {
            this.infoData(this.serviceId);
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.dialogVisible = false;
          } else {
            this.$message({
              type: "error",
              message: res.data.message,
            });
          }
        },
        (error) => {
          window.console.log(error);
        }
      );
    },
    /* 返回页面 */
    goBack() {
      this.$router.$avueRouter.closeTag();
      this.$router.back();
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/.el-transfer-panel__list.is-filterable {
  width: 400px !important;
  height: 500px !important;
}

/deep/.el-transfer-panel {
  width: 400px !important;
  height: 500px !important;
}

.picture-preview {
  color: #409eff;
  cursor: pointer;
}
.haruyuki-image-preview {
  width: 260px;
}
.image-preview-title{
  // text-align: center;
  margin-bottom: 10px;
}
.haruyuki-image-preview .haruyuki-image .el-image{
  border-radius:10px;
}
/deep/ .el-image__error{
  background: #fff;
}

.infoWrap_line{
  display: flex;
  align-items: center;
  padding-bottom: 30px;
  .info_line_span{
    width: 140px;
    text-align: right;
  }
}
.nullData{
  text-align: center;
  font-size: 24px;
  font-weight: bold;
}
.w100{
  width: calc(100% - 140px);
}
.btnCode{
  width: 100px;
  border-radius: 0;
  // padding-left: 0;
  // padding-right: 0;
  padding:0;
}
.btnCode:hover{
  padding:0;
  background: transparent;
  border:none
}
/deep/ .el-input-group__append{
  background: #409eff !important;
  color: #fff !important;
}
</style>